<template>
    <div class="container">

        <div class="body_wrap">

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="hover">
                        <!-- 基本搜索+功能按钮 -->
                        <el-form class="mb10" ref="search" :inline="true" :model="queryParams" size="medium" label-width="">
                            <el-card class="table_tool_bar_wrap" shadow="never">
                                <div class="base_wrap">
                                    <div class="left">
                                        <el-form-item label="" prop="keyword">
                                            <el-input placeholder="请输入..." v-model="queryParams.keyword" clearable/>
                                        </el-form-item>
                                        <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                        <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                                    </div>

                                    <div class="right">
                                        <el-button @click="handleAddOrUpdateVisible()" type="primary" size="medium" icon="el-icon-plus"></el-button>
                                        <el-button @click="handleDelete()" type="danger" size="medium" icon="el-icon-delete"></el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-form>

                        <!-- 表格 -->
                        <el-table
                            ref="table"
                            size="medium"
                            empty-text="暂无数据"
                            element-loading-text="给我一点时间"
                            fit border highlight-current-row
                            height="550"
                            :stripe="stripe"
                            v-loading="loadingData"
                            :data="dataList"
                            @row-click="handleRowClick"
                            @selection-change="handleSelection">

                            <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                            <el-table-column label="名称" prop="name" v-if="isHideColumn('name')" align="left" show-overflow-tooltip/>
                            <el-table-column label="编码" prop="code" v-if="isHideColumn('code')" align="left" show-overflow-tooltip/>
                            <el-table-column label="备注" prop="remarks" v-if="isHideColumn('remarks')" align="left" show-overflow-tooltip/>
                            <el-table-column label="状态" align="center" width="80px">
                                <template slot-scope="scope">
                                    <el-tag type="success" size="small" v-if="scope.row.status === 1">正常</el-tag>
                                    <el-tag type="danger" size="small" v-else>禁用</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="100px" align="left" fixed="right">
                                <template slot-scope="scope">
                                    <el-button @click="handleAddOrUpdateVisible(scope.row.id)" type="text" size="small">编辑</el-button>
                                    <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>

                        </el-table>

                        <!-- 分页 -->
                        <TablePagination
                            :total.sync="queryParams.total"
                            :page.sync="queryParams.page"
                            :limit.sync="queryParams.limit"
                            @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange"/>
                    </el-card>
                </el-col>

                <el-col :span="12">
                    <DictDetail ref="dictDetail"/>
                </el-col>
            </el-row>

            <!-- 弹窗, 新增 / 修改 -->
            <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate>

        </div>
    </div>
</template>

<script>
import TableMixin from '@/mixin/TableMixin'
import TablePagination from '@/views/components/table/table-pagination'
import AddOrUpdate from './add-or-update-dialog'
import DictDetail from '@/views/system/sysdictdetail'
export default {
    mixins: [TableMixin],
    components: {
        TablePagination,
        AddOrUpdate,
        DictDetail
    },

    data() {
        return {
            dataList: [],
            loadingData: false,
            addOrUpdateVisible: false,
            selectionRows: [],
            searchFlag: true,
            queryParams: {
                sortColumns: null,
                sortType: null,
                keyword: null,
                name: null,
                code: null,
                status: null,
                remarks: null,
                ctime: null,
                utime: null
            },

            dictId: null
        }
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
            this.getDataList()
        })
    },

    methods: {
        handleRowClick(row, column, event) { // 根据字典ID加载字典详情
            //调用子组件方法
            this.$refs.dictDetail.getDataList(row.id)
        },

        /**
         * 新增或编辑
         */
        handleAddOrUpdateVisible(id) {
            // 表单窗口
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },

        /**
         * 删除
         */
        async handleDelete(row) {
            let ids = []
            if (row) {
                ids.push(row.id)
            }
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    ids.push(item.id)
                })
            }
            if (ids.length <= 0) {
                this.$notify({ title: '提示', message: '请选择需要删除的记录！', type: 'info' });
            } else {
                const confirm = await this.$confirm('确定要删除？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/system/dict/delete',
                        method: 'POST',
                        data: ids
                    })
                    if (this.ResultMessage(res)) {
                        this.getDataList()
                    }
                }
            }
        },

        /**
         * 获取表格数据
         */
        async getDataList() {
            this.loading = true
            const res = await this.$http({
                url: '/system/dict/page',
                method: 'GET',
                params: this.queryParams
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data.records
                this.queryParams.total = res.data.total
            }
            this.loading = false
        },

        /**
         * 搜索
         */
        handleSearch() {
            this.getDataList()
        },
        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        },
        /**
         * 重置搜索表单
         */
        handleReset() {
            this.handleResetPage()
            this.$refs.search.resetFields()
            this.getDataList()
        }

    }

}
</script>

<style lang="scss" scoped>

</style>
